<template>
  <ContentBase>
    <a-layout>
      <a-layout-sider
        v-model:collapsed="isCollapsed"
        :trigger="null"
        collapsible
        :width="180"
        :collapsed-width="60"
        :style="{ background: '#fff' }"
      >
        <a-menu
          theme="light"
          mode="inline"
          :default-selected-keys="['1-2']"
          :default-open-keys="['sub1']"
          v-model:openKeys="siderOpenKeys"
          v-model:selectedKeys="siderSelectedKeys"
          @select="handleSelect"
        >
          <!-- 带子菜单的项目 -->
          <a-sub-menu key="sub1">
            <template #title>
              <span class="first-title">
                <BookFilled />
                <span class="menu-title">提示词</span>
              </span>
            </template>
            <a-menu-item key="1-1">常规提示词</a-menu-item>
            <a-menu-item key="1-2">条件提示词</a-menu-item>
            <a-menu-item key="1-3">模版提示词</a-menu-item>
          </a-sub-menu>

          <!-- 不带子菜单的普通项目 -->
          <a-menu-item key="2">
            <template #default>
              <span class="first-title">
                <DatabaseOutlined />
                <span class="menu-title">数据库</span>
              </span>
            </template>
          </a-menu-item>
          <a-menu-item key="3">
            <template #default>
              <span class="first-title">
                <FileTextFilled />
                <span class="menu-title">文本库</span>
              </span>
            </template>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout-header :style="{ background: '#fff', padding: 0 }">
        <a-button type="text" size="small" @click="toggleCollapse">
          <template v-if="!isCollapsed">
            <left-outlined />
          </template>
          <template v-else>
            <right-outlined />
          </template>
        </a-button>
      </a-layout-header>
    </a-layout>
  </ContentBase>
</template>

<script setup>
import ContentBase from "../ContentBase.vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
import {
  LeftOutlined,
  RightOutlined,
  DatabaseOutlined,
  BookFilled,
  FileTextFilled,
} from "@ant-design/icons-vue"; // * as Icons 导入所有

const emit = defineEmits(["selectedChange"]);

const isCollapsed = ref(false);
const siderSelectedKeys = ref(["1-2"]);
const siderOpenKeys = ref(["sub1"]);
const router = useRouter();
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};

function handleSelect({ key }) {
  if (key === "1-1") {
    router.push({ name: "cprompt" });
    console.log("1-1");
  } else if (key === "1-2") {
    router.push({ name: "cprompt" });
    console.log("1-2");
  } else if (key === "1-3") {
    router.push({ name: "cprompt" });
    console.log("1-3");
  }
}
</script>

<style scoped>
.first-title {
  display: flex;
  justify-content: left;
  align-items: center;
}
.menu-title {
  display: inline;
}

/* 隐藏默认的菜单图标 */
.a-menu-item .anticon,
.a-menu-submenu-title .anticon {
  display: none;
}

/* 重新显示我们想要的图标 */
.a-menu-item .menu-title .anticon,
.a-menu-submenu-title .menu-title .anticon {
  display: inline-block;
  margin-right: 8px;
}

/* 调整子菜单项的样式 */
.a-menu-submenu .a-menu-item {
  padding-left: 16px; /* 增加左侧内边距以区分子菜单 */
}

/* 当折叠时，隐藏标题文本 */
.a-menu-inline .a-menu-submenu-title .menu-title span {
  display: none;
}

/* 当展开时，显示标题文本 */
.a-menu-inline:not(.a-menu-inline-collapsed)
  .a-menu-submenu-title
  .menu-title
  span {
  display: inline-block;
}
</style>
